<template>
	<!-- 分类轮播 -->
	<view class="category">
		<view class="box">
			<swiper	class="swiper" :duration="duration" @change="categoryChange">
				<swiper-item v-for="(page, pageindex) in categoryList" :key="pageindex" >
					<view class="category-list">
						<view class="icon" v-for="category in page" :key="category.cat_id" @tap="toCategory(category)">
							<image mode="scaleToFill" :src="category.img"></image>
							<view>{{ category.title }}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="dots">
				<view v-for="(page, pageindex) in categoryList" :key="pageindex" :class="{ active: pageindex == currentPageindex }"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			iconList : {
				type: Array,
				require: true
			},
			duration: {
				type: Number,
				require: false,
				default: 300
			}
		},
		data() {
			return {
				currentPageindex: 0
			};
		},
		computed:{
			//计算categoryList
			 categoryList () {
				  const categoryList = []
				  this.iconList.forEach((item, index) => {
					const page = Math.floor(index / 8)
					if (!categoryList[page]) {
					  categoryList[page] = []
					}
					categoryList[page].push(item)
				  })
				  return categoryList
				}
		},
		methods:{
			//更新分类指示器
			categoryChange(event) {
				this.currentPageindex = event.detail.current;
			}
		}
	}
</script>
	
<style lang="stylus" scoped>
	.category 
		background-color: #fcfcfc; 
		.box 
			.dots 
				display: flex;
				justify-content: center;
				height: 15upx;
				view
					width: 30upx;
					height: 5upx;
					background-color: rgba(0, 0, 0, 0.2);
					&.active 
						background-color: #ff570a;
			.swiper 
				width: 100%;
				height: 310upx;
				padding: 10upx 0;
				.category-list 
					width: 100%;
					display: flex;
					justify-content: flex-start;
					padding: 10upx 0;
					flex-flow: wrap;
					.icon 
						width: 25%;
						height: 150upx;
						display: flex;
						flex-flow: wrap;
						justify-content: center;
						color: #666;
						image 
							width: 100upx;
							height: 100upx;
						view
							width: 100%;
							font-size: 25upx;
							color: #212121;
							display: flex;
							justify-content: center;
</style>
